<!DOCTYPE html>
<html lang="en">
<head>
  <{include file="public_html/header_tag.html"}>
    <title>视频课详情</title>

</head>
<body>
<div class="wrap">
    <!--star header-->
    <div class="header">
        <{include file="public_html/header_menu.html"}>
    </div>
    <!--end  header-->
    <!--star 播发器-->
    <div class="fix b-121212">
    	<div class="fix w1200 ir c-f4f4f4">
        	<!--star videoPlayer-->
        	<div class="videoPlayer">
            	<div class="vio_source">
                	<div id="video_info"></div>
                </div>
                <div class="vio_share h55 oh p-lr20 fwb">
                	<a href="javascript:;" id="add_comment"><img src="/static/www/img/ico_2525_coll.png"><span class="p-l5">评价课程</span></a>
                	<span class="bdsharebuttonbox" style="float:right; margin-top: 5px;">
                        <a href="#" class="bds_more" data-cmd="more"></a>
                        <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
                        <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
                        <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
                    </span>
                    <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"1","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
                </div>
            </div>
        	<!--end videoPlayer-->
        	<!--star vioColumn-->
            <div class="vioRightbox">
            	<div class="vio_depress l"><span>&gt;</span></div>
            	<div class="vio_column l">
                	<div class="c_tit"><span class="fs16 c-057edb">目录</span></div>
                    <div class="c_con fix">
                    <{foreach from=$chapter key=key item=item_z}>
                	<dl>
                    	<dt><{$key}>章　<{$item_z.name}></dt>
                        <dd>
                            <{foreach from=$item_z.jie key=k item=item_j}>
                        	<div <{if $item_j.id == $video.cid}> class="curr" <{/if}>><a href="/video/play/<{$item_j.course_id}>/<{$item_j.id}>"><{$k+1}>　<{$item_j.name}></a><i></i></div>
                            <{/foreach}>
                        </dd>
                    </dl>
                	<{/foreach}>
                    </div>
                </div>
            </div>
        	<!--end vioColumn-->
            <script type="text/javascript" src="/static/www/ckplayer/ckplayer.js" charset="utf-8"></script>
            <script type="text/javascript">
                var flashvars={
                    f:'<{$video.video_url}>',
                    //f:'rtmp://rtmp-live.dianmoo.com/live/123456',
                    c:0,
                    i:'<{$video.image_url}>'
                    };
                var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:'transparent'};
                CKobject.embedSWF('/static/www/ckplayer/ckplayer.swf','video_info','ckplayer_a1','940','565',flashvars,params);
                /*
                CKobject.embedSWF(播放器路径,容器id,播放器id/name,播放器宽,播放器高,flashvars的值,其它定义也可省略);
                下面三行是调用html5播放器用到的
                */
                var video=['<{$video.video_url}>->video/mp4'];
                var support=['iPad','iPhone','ios','android+false','msie10+false'];
                CKobject.embedHTML5('video_info','ckplayer_a1',600,400,video,flashvars,support);
                
                
                function closelights(){//关灯
                    alert(' 本演示不支持开关灯');
                }
                function openlights(){//开灯
                    alert(' 本演示不支持开关灯');
                }
              </script>
              <script src="/static/www/js/jquery.nicescroll.min.js"></script>
              <script>
                  $(function(){
                    var cn = $('.vio_column'),vp = $('.videoPlayer');
                    cn.find('.c_con').niceScroll({ 
                        cursorcolor: "#444444",//#CC0071 光标颜色 
                        cursoropacitymax: 1, //改变不透明度非常光标处于活动状态（scrollabar"可见"状态），范围从1到0 
                        touchbehavior: true, //使光标拖动滚动像在台式电脑触摸设备 
                        cursorwidth: "8px", //像素光标的宽度 
                        cursorborder: "0", //游标边框css定义 
                        cursorborderradius: "8px",//以像素为光标边界半径 
                        autohidemode: true //是否隐藏滚动条 
                    });
                    $('.vio_depress').bind('click', function(){
                        if(cn.is(':visible')){//如果显示点击隐藏
                            $(this).find('span').text('<');
                            cn.hide();
                            vp.css({'width':'100%'});
                        }else{//如果隐藏点击显示
                            $(this).find('span').text('>');
                            cn.show();
                            vp.removeAttr('style');
                        }
                    });
                });
            </script>
        </div>
    </div>
    <!--end 播发器-->
	<!--star main-->
    <div class="wrap_main fix">
        <!--content star-->
        <div class="col_main">
        	
            <div class="box_item m-t35 line-all b-FFFFFF">
            	<div class="p-lr30">
                	<div class="p-tb25 LH40 fix">
                    	<div class="l">
                    	<div class="fs22"><{$info.title}></div>
                        <div class="fs14 c-999999">
                        	<span>课时总数<em class="c-333333 p-l5"><{$info.course_time}></em></span>
                            <span class="p-l20 m-r20 h10 oh line-right inlick"></span>
                        	<span>学习有效期<em class="c-333333 p-l5"><{if $is_free == 1}>VIP免费课程<{else}><{$info.effective_day}>天<{/if}></em></span>
                            <span class="p-l20 m-r20 h10 oh line-right inlick"></span>
                        	<span>学习次数<em class="c-333333 p-l5"><{$info.click_num}>次</em></span>
                            <span class="p-l20 m-r20 h10 oh line-right inlick"></span>
                        	<span>学生满意度<em class="c-333333 p-l5"><{if $info.comment_count == 0}>100%<{else}><{(($info.star4+$info.star5)/$info.comment_count*100)|string_format:'%.0f'}>%<{/if}></em></span>
                        </div>
                        </div>
                        <div class="r tac" style="width:320px;">
                        	<div class="fs20 c-999999">还剩<{$remaining}>节课,加油哦！</div>
                            <div class="progressBar2 u1 m-t10">
                            	<div class="subBar u1" style="width:<{$progress}>%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--star-->
            <div class="box_item m-t40">
                <div class="mtcBox">
                    <div class="mt h30">
                        <span class="fs16 c-333333 p-lr10">课程评价<span class="c-ff5215 p-l10">(<{$info.comment_count}>)</span></span>
                    </div>
                    <div class="mc fix line-top" style="border-bottom:none;">
                        <div class="l LH50 tac p-t30" style="width:350px;padding-top: 80px;">
                            <div class="p30">
                                <div class="p-lr50">
                                    <div class="c-ff5215" style="font-size:50px;"><{if $info.comment_count == 0}>100%<{else}><{(($info.star4+$info.star5)/$info.comment_count*100)|string_format:'%.0f'}>%<{/if}></div>
                                    <div class="fs16 c-999999">满意度</div>
                                </div>
                            </div>
                        </div>
                        <div class="l p30 fs14 s_pinjialist">
                            <ul>
                                <li class="item">
                                    <div class="tit l"><span>1星</span><span class="c-999999 p-l10">(<{$info.star1}>)</span></div>
                                    <div class="progressBar m-t10 l">
                                        <div class="subBar" style="width:<{if $info.comment_count > 0}><{($info.star1/$info.comment_count*100)|string_format:'%.0f'}><{else}>0<{/if}>%"></div>
                                    </div>
                                </li>
                                <li class="item">
                                    <div class="tit l"><span>2星</span><span class="c-999999 p-l10">(<{$info.star2}>)</span></div>
                                    <div class="progressBar m-t10 l">
                                        <div class="subBar" style="width:<{if $info.comment_count > 0}><{($info.star2/$info.comment_count*100)|string_format:'%.0f'}><{else}>0<{/if}>%"></div>
                                    </div>
                                </li>
                                <li class="item">
                                    <div class="tit l"><span>3星</span><span class="c-999999 p-l10">(<{$info.star3}>)</span></div>
                                    <div class="progressBar m-t10 l">
                                        <div class="subBar" style="width:<{if $info.comment_count > 0}><{($info.star3/$info.comment_count*100)|string_format:'%.0f'}><{else}>0<{/if}>%"></div>
                                    </div>
                                </li>
                                <li class="item">
                                    <div class="tit l"><span>4星</span><span class="c-999999 p-l10">(<{$info.star4}>)</span></div>
                                    <div class="progressBar m-t10 l">
                                        <div class="subBar" style="width:<{if $info.comment_count > 0}><{($info.star4/$info.comment_count*100)|string_format:'%.0f'}><{else}>0<{/if}>%"></div>
                                    </div>
                                </li>
                                <li class="item">
                                    <div class="tit l"><span>5星</span><span class="c-999999 p-l10">(<{$info.star5}>)</span></div>
                                    <div class="progressBar m-t10 l">
                                        <div class="subBar" style="width:<{if $info.comment_count > 0}><{($info.star5/$info.comment_count*100)|string_format:'%.0f'}><{else}>0<{/if}>%"></div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        
                    </div>
                </div>
                
            	<div class="fix line-all b-FFFFFF shipincons">
                    <!--star课程评价 -->
                    <div class="fix c">
                        <div class="fs14 s_pingNeirong" xljs-name="xljs-tab2">
                            
                            <div class="mc fix tabCon">
                                <!--star 全部-->
                                <div class="divitem">
                                    <iframe name="myiframe" id="myiframe" width="100%" height="100%" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no" src="/video/video_comment_list/<{$info.id}>"></iframe>
                                </div>
                                <!--end 全部-->
                                <!--star 好评-->
                                <div class="divitem">
                                    <iframe name="myiframe" id="myiframe1" width="100%" height="100%" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no" src="/video/video_comment_list/<{$info.id}>/1"></iframe>
                                </div>
                                <!--end 好评-->
                                <!--star 中评-->
                                <div class="divitem">
                                    <iframe name="myiframe" id="myiframe2" width="100%" height="100%" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no" src="/video/video_comment_list/<{$info.id}>/2"></iframe>
                                </div>
                                <!--end 中评-->
                                <!--star 差评-->
                                <div class="divitem">
                                    <iframe name="myiframe" id="myiframe3" width="100%" height="100%" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no" src="/video/video_comment_list/<{$info.id}>/3"></iframe>
                                </div>
                                <!--end 差评-->
                            </div>
                        </div>
                    </div>
                    <!--star分页-->
                    
                    <!--end课程评价 -->
                </div>
                
            	<div class="fix" style="height:90px;"></div>
                
            </div>
            <!--end-->
        </div>
        <!--content end-->
    </div>
	<!--end  main-->
    <!--star  footer-->
    <div class="footer b-FFFFFF">
    <{include file="public_html/footer.html"}>
    </div>
    <!--end  footer-->
</div>
</body>
<div class="u_pingjia_main fs16 hide">
    <div class="pj_item">
        <div class="fop-label">商品满意度</div>
        <div class="fop-main">
            <div id="rate-comm"></div>
        </div>
    </div>
    <div class="pj_item pos_item">
        <div class="fop-label">评价：</div>
        <div class="fop-main">
            <div class="txtAnum"><textarea onkeyup="keyAnum($(this))" name="content" placeholder="留下你的牛评吧~"></textarea></div>
            <div class="r tar">
                <strong id="ceiling">字数已到上限啦~</strong>
                <span class="c-666666 p-t10">最少10个字，最多可输入500字，你已输入<font id="word">0</font>字</span>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
$("#myiframe").load(function () {
    var mainheight = $(this).contents().find("body").height() + 30;
    $(this).height(mainheight);
});
$("#myiframe1").load(function () {
    var mainheight = $(this).contents().find("body").height() + 30;
    $(this).height(mainheight);
});
$("#myiframe2").load(function () {
    var mainheight = $(this).contents().find("body").height() + 30;
    $(this).height(mainheight);
});
$("#myiframe3").load(function () {
    var mainheight = $(this).contents().find("body").height() + 30;
    $(this).height(mainheight);
});

function keyAnum(obj){
    var len = $(obj).val().length;
    if (len > 500) {
        $("#ceiling").show();
        var num = $(obj).val().substring(0, 500);
        $(obj).val(num);
        return false;
    }
    else {
        $("#ceiling").hide();
        $("#word").text($(obj).val().length);
        return false;
    }
}


$("#add_comment").click(function(){
    layer.open({
        type: 2,
        area: ['800px', '344px'],
        fixed: false, //不固定
        maxmin: false,
        shadeClose: true,
        title: false,
        content: "/comment/add/<{$info.id}>/<{$info.type}>"
    });
})
</script>
</html>

